<template>
    <div style="background: rgba(246, 246, 248, 1)">
        <div class="reg_header">
            <div class="main">
                <!-- <a :href="url">
                    <img src="@/assets/img/WechatIMG233.png" alt />
                </a>-->
            </div>
        </div>
        <div class="logo">
            <a :href="url">
                <img src="@/assets/img/zhaopinLogo.png" alt />
            </a>
        </div>
        <div class="resume-create">
            <div class="step-content">
                <el-steps :active="values" space="400px" align-center>
                    <el-step :title="item.title" :description="item.date" v-for="(item, index) in stepsData" :key="index"> </el-step>
                </el-steps>
            </div>
        </div>
        <div v-if="values == 1" @keyup.enter="onSubmit">
            <div class="reg_box">
                <h2>
                    <span>验证手机号码</span>
                    <router-link to="/login">返回</router-link>
                </h2>
                <el-form :model="param" ref="reg" :rules="rules">
                    <el-form-item prop="phone">
                        <el-input v-model.trim="param.phone" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="captchaCode">
                        <el-input class="captchaCode" v-model="param.captchaCode" placeholder="图片验证码"></el-input>
                        <img :src="img" alt @click="changeImage" />
                    </el-form-item>
                    <el-form-item prop="smsCode" class="btn_inner">
                        <el-input v-model="param.smsCode" placeholder="短信验证码">
                            <el-button slot="append" @click="postMassage" :class="{ disabled: countDown }">
                                发送验证码
                                <span v-show="countDown">({{ countDown }})</span>
                            </el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="agreement">
                        <el-checkbox v-model="param.selected" />我已阅读并同意
                        <a href="javaScript:;" @click="dialogVisible = true">《樟树市人才服务》</a>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="submit_btn" type="primary" @click="onSubmit">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-else-if="values === 2" class="info_box" @keyup.enter="finished">
            <h3>填写账号信息</h3>
            <el-form ref="form" :model="form" :rules="info_rules">
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="单位全称"></el-input>
                </el-form-item>
                <el-form-item prop="nature">
                    <el-select v-model="form.nature" placeholder="单位性质">
                        <el-option v-for="(item, index) in options.nature" :key="index" :label="item.name" :value="item.val"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="industry">
                    <el-select v-model="form.industry" placeholder="所属产业">
                        <el-option v-for="(item, index) in options.industry" :key="index" :label="item.name" :value="item.val"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="trade">
                    <el-cascader
                        :options="options.trade"
                        :props="{ value: 'code', label: 'name', children: 'childVo' }"
                        v-model="form.trade"
                        placeholder="所属行业"
                    ></el-cascader>
                </el-form-item>
                <el-form-item prop="area">
                    <el-select v-model="form.area" placeholder="所在地区">
                        <el-option v-for="(item, index) in options.area" :key="index" :label="item.name" :value="item.val"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="scale">
                    <el-select v-model="form.scale" placeholder="单位规模">
                        <el-option v-for="(item, index) in options.scale" :key="index" :label="item.name" :value="item.val"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="address">
                    <el-input v-model="form.address" placeholder="公司地址"></el-input>
                </el-form-item>
                <el-form-item prop="profile">
                    <el-input type="textarea" v-model="form.profile" maxlength="500" show-word-limit rows="6" placeholder="单位简介">
                    </el-input>
                    <!-- <div class="edit_container">
            <quillEditor @listenEvent="getProfile" :profile='form.profile' placeholder='公司简介' v-if='isShowFile'>
            </quillEditor>
          </div> -->
                </el-form-item>
                <el-form-item prop="companyUserName">
                    <el-input v-model="form.companyUserName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item prop="contactPhone">
                    <el-input v-model="form.contactPhone" placeholder="联系手机"></el-input>
                </el-form-item>
                <el-form-item prop="job">
                    <el-input v-model="form.job" placeholder="职位"></el-input>
                </el-form-item>
                <el-form-item prop="mail">
                    <el-input v-model="form.mail" placeholder="工作邮箱"></el-input>
                </el-form-item>

                <!-- <el-form-item prop="logUserName">
          <el-input v-model="form.logUserName" placeholder="登录用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="登录密码"></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input v-model="form.repassword" placeholder="确认密码"></el-input>
        </el-form-item> -->
                <el-form-item class="btn_box">
                    <!-- <el-button class="pre_btn" type="primary" @click="prev">上一步</el-button> -->
                    <el-button class="finish_btn" type="primary" @click="finished" :loading="loading" v-loading.fullscreen.lock="loading"
                        >完成</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div v-else-if="values === 3" class="finish_box">
            <router-link to="/">注册成功前往首页！</router-link>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="30%">
            <div>樟树市人才服务注册会员使用协议</div>
            <div>为保证用户的正常使用和网站的正常运行，我中心特设定本协议，不接受本协议，请勿使用本网站。</div>
            <div>
                一、信息的发布
                <ol>
                    <li>不发布任何反动、违反法律、法规、规章规定的信息；</li>
                    <li>不发布与招聘和人才毫无关联的商业信息；</li>
                    <li>不发布任何虚假的信息；</li>
                    <li>用户对所发布的信息承担完全法律责任；如需要，用户需提供证明信息准确性的相关材料。</li>
                </ol>
            </div>
            <div>
                二、信息的使用
                <ol>
                    <li>招聘单位仅可就招聘目的使用求职者的简历信息；</li>
                    <li>求职者仅可因应聘某职位，使用招聘单位发布的招聘信息；</li>
                    <li>本网站提供的其他信息，仅与其相应内容有关的目的而被使用；</li>
                    <li>不得将任何本网站的信息用作任何商业目的。</li>
                </ol>
            </div>

            <div>
                三、信息的公开
                <p>
                    本网站尊重用户对自身所提供信息的公开程度，并严格遵照执行公开级别，因其它用户误用信息而导致的任何损失，本网站不承担责任。
                </p>
            </div>
            <div>
                四、信息的准确性
                <p>
                    任何在本网站发布的信息，均必须符合合法、准确、及时、完整的原则。但本网站将不能保证所有由第三方提供的信息，或本网站自行采集的信息完全准确。由用户自身对信息进行核实和使用。本网站对访问者未经自行核实误用本网站信息造成的任何损失不予承担任何责任。对于与本网站链接的网站所涉及的信息准确性，本网站不予保证。
                </p>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="系统通知" :visible.sync="addVisible" width="30%" class="addBox" top="50vh">
            <span
                >当前企业已经注册，原企业联系人 {{ account.contact ? account.contact : '暂无' }}，联系方式
                {{ account.contactPhone ? account.contactPhone : '暂无' }}，是否加入公司?</span
            >
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAccount">加入企业</el-button>
                <el-button @click="addVisible = false">稍后</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getNature, getIndustry, getScale, getArea, token, checkName } from '../../../api/register';
import { findDictByCode, addCompany, findTradeDict } from '../../../api/register';
import { register, captchaImg, postMsg } from '../../../api/index';
import { encrypt } from '../../../utils/unitFile';
import quillEditor from '../../common/quillEditor'; //调用编辑器
export default {
    name: 'registration',
    data() {
        var validateComfirmPwd = (rule, value, callback) => {
            if (this.form.password !== value) {
                callback(new Error('确认密码与密码不一致！'));
            } else {
                callback();
            }
        };
        var checkImage = (rule, value, callback) => {
            console.log('图片');

            if (value.length > 3) {
                captchaImg({ code: this.param.captchaCode, uuid: this.param.captchaUUid }).then((data) => {
                    if (data.data) {
                        this.checkImage = true;
                        callback();
                    } else {
                        callback(new Error('请输入正确验证码'));
                    }
                });
            } else {
                callback();
            }
        };
        // var validateProfile = (rule, value, callback) => {
        //   console.log(1);
        //   let ary = value.match(/(?<=>)[^<>]+(?=<)/g);
        //   if (ary&&ary.length) {
        //     console.log(ary);
        //     let str = ary.join('');
        //     if (str.length > 500) {
        //       callback(new Error('公司简介不能超过500个字！'));
        //     } else {
        //       callback()
        //     }
        //   }
        // };
        return {
            addVisible: false,
            isShowFile: false,
            loading: false,
            timerMin: null,
            timer: null,
            url: '',
            editorOption: {},
            dialogVisible: false,
            clickTime: 0,
            values: 2,
            countDown: '',
            account: {},
            stepsData: [
                { title: '手机号码验证', date: '' },
                { title: '账号信息填写', date: '' },
                { title: '完成注册', date: '' }
            ],
            img: '',
            param: {
                phone: '',
                captchaCode: '',
                captchaUUid: '',
                smsCode: '',
                selected: false
            },
            form: {
                name: '',
                nature: '',
                industry: '',
                trade: [],
                area: '',
                scale: '',
                address: '',
                profile: '',
                companyUserName: '',
                job: '',
                mail: '',
                contactPhone: '',
                logUserName: '',
                password: '',
                repassword: ''
            },
            options: {
                trade: [],
                nature: [],
                industry: [],
                area: [],
                scale: []
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
                ],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                captchaCode: [{ required: true, message: '请输入图片验证码', trigger: 'blur' }, { validator: checkImage }],
                smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }]
            },
            info_rules: {
                name: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                    { max: 20, message: '单位名称不能超过20个字' }
                ],
                nature: [{ required: true, message: '请选择单位性质', trigger: 'change' }],
                industry: [{ required: true, message: '请选择所属产业', trigger: 'change' }],
                trade: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
                area: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
                scale: [{ required: true, message: '请选择单位规模', trigger: 'change' }],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                    { max: 100, message: '地址不能超过100个字' }
                ],
                profile: [
                    { required: true, message: '请输入单位简介', trigger: 'blur' }
                    // { validator: validateProfile }
                ],
                companyUserName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { max: 20, message: '姓名不能超过20个字' }
                ],
                job: [
                    { required: true, message: '请输入职位', trigger: 'blur' },
                    { max: 20, message: '职位不能超过20个字' }
                ],
                mail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^[A-Za-z0-9]+([_\.A-Za-z0-9\-]){0,254}@([A-Za-z0-9\-]{0,64}\.)+[A-Za-z]{2,6}$/,
                        message: '请输入正确的邮箱',
                        trigger: 'change'
                    },
                    { max: 80, message: '邮箱不能超过80个字' }
                ],
                logUserName: [
                    { required: true, message: '请输入登录用户名', trigger: 'blur' },
                    { pattern: /[0-9a-zA-Z]{6,20}/, message: '用户名由长度为6-20的数字、字母组成' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
                ],
                repassword: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    { validator: validateComfirmPwd },
                    { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
                ]
            }
        };
    },
    created() {
        // token().then(data => {
        //   if (data.success) {
        //     this.$message.error(`您已登录无需重复登录！`);
        //     this.$router.push({ path: '/' });
        //   }
        // });
        this.getDic();
    },
    mounted() {
        this.changeImage();
        this.url = process.env.VUE_APP_URL;
        this.isShowFile = true;
    },
    components: {
        //使用编辑器
        quillEditor
    },
    methods: {
        // 获取富文本内容
        getProfile(params) {
            this.form.profile = params;
        },
        // 获取字典
        getDic() {
            let obj = {
                nature: getNature,
                industry: getIndustry,
                scale: getScale,
                area: getArea,
                trade: findTradeDict
            };
            Promise.all(Object.values(obj).map((item) => item())).then((data) => {
                Object.keys(obj).forEach((key, index) => {
                    this.options[key] = data[index].data;
                });
                console.log(this.options);
            });

            // findTradeDict().then(data => {
            //     console.log(data);
            //     this.options.trade = data.data;
            // });
            // let code = ['company_nature', 'industry', 'area', 'scale'];
            // code.forEach(item => {
            //     findDictByCode(item).then(data => {
            //         console.log(data);
            //         this.options[item] = data.data;
            //     });
            // });
        },
        // 发送短息
        postMassage(e) {
            if (this.param.phone) {
                if (this.checkImage) {
                    if (this.countDown) {
                        return;
                    }
                    let query = {
                        phone: this.param.phone,
                        uuid: this.param.captchaUUid,
                        code: this.param.captchaCode,
                        type: 1
                    };
                    postMsg(query).then((data) => {
                        if (data.success) {
                            let previous = this.clickTime;
                            let now = new Date();
                            if (now - previous > 60000) {
                                console.log(1);
                                this.clickTime = new Date();
                                this.countDown = 60;
                                this.timerMin = setInterval(() => {
                                    this.countDown -= 1;
                                }, 1000);
                                this.timer = setTimeout(() => {
                                    this.countDown = '';
                                    clearInterval(this.timerMin);
                                    clearTimeout(this.timer);
                                }, 60000);
                            }
                        } else {
                            this.checkImage = false;
                            this.$message.error(`${data.msg}`);
                        }
                    });
                } else {
                    this.$message.error('请正确输入图片验证码');
                }
            } else {
                this.$message.error('请输入手机号');
            }
        },

        // 下一步
        onSubmit() {
            this.$refs.reg.validate((valid) => {
                if (valid) {
                    if (!this.param.selected) {
                        this.$message.success('请仔细阅读协议，并点击同意！');
                        return;
                    }
                    let query = {
                        phone: this.param.phone,
                        captchaCode: this.param.captchaCode,
                        captchaUUid: this.param.captchaUUid,
                        smsCode: this.param.smsCode,
                        captchaChannelType: 1
                    };
                    register(query).then((data) => {
                        if (data.success) {
                            // this.$message.success('注册成功');
                            // localStorage.setItem('account', data.data.userName);
                            localStorage.setItem('ep_userName', this.param.phone);
                            this.getDic();
                            this.values = 2;
                        } else {
                            this.changeImage();
                            this.checkImage = false;
                            this.$message.error(`${data.msg}`);
                            this.clickTime = 0;
                            this.countDown = '';
                            this.param.smsCode = '';
                            clearInterval(this.timerMin);
                            clearTimeout(this.timer);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 上一页
        prev() {
            this.values = 1;
        },
        // 新增企业账号
        addAccount() {
            this.loading = true;
            let query = {
                ...this.form,
                isEdit: 1,
                password: encrypt(this.form.password),
                repassword: encrypt(this.form.repassword),
                trade: JSON.stringify(this.form.trade)
            };
            addCompany(query).then((data) => {
                console.log(data);
                if (data.success) {
                    this.loading = false;
                    // localStorage.setItem('ep_userName', data.data.userName);
                    // localStorage.setItem('ep_userId', data.data.userId);
                    this.$message.success('注册成功');
                    // this.values = 3;
                    this.$router.push({ path: '/' });
                } else {
                    this.loading = false;
                    this.$message.error(`${data.msg}`);
                }
                this.addVisible = false;
            });
        },
        // 保存企业信息
        finished() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let query = new FormData();
                    query.append('companyName', this.form.name);
                    checkName(query).then((res) => {
                        if (res.data) {
                            this.account = res.data || {};
                            this.addVisible = true;
                        } else {
                            this.loading = true;
                            let query = {
                                ...this.form,
                                isEdit: 2,
                                contactPhone: this.param.phone,
                                password: encrypt(this.form.password),
                                repassword: encrypt(this.form.repassword),
                                trade: JSON.stringify(this.form.trade)
                            };
                            addCompany(query).then((data) => {
                                console.log(data);
                                if (data.success) {
                                    this.loading = false;
                                    // localStorage.setItem('ep_userName', data.data.userName);
                                    // localStorage.setItem('ep_userId', data.data.userId);
                                    this.$message.success('注册成功');
                                    // this.values = 3;
                                    this.$router.push({ path: '/' });
                                } else {
                                    this.loading = false;
                                    this.$message.error(`${data.msg}`);
                                }
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="css" scoped>
.logo {
    margin-top: 30px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
}
.reg_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-bottom: 40px;
}
.el-form-item.btn_inner /deep/ .el-input__inner {
    width: 100%;
}
.btn_inner /deep/ .el-button {
    width: 110px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    vertical-align: middle;
    background: #f5f7fa;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    /* border-left: 2px solid rgba(232, 232, 232, 1); */
}
.btn_inner /deep/ .el-button.disabled {
    color: #999999;
}
.main a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
}
.main a img {
    margin-top: 5px;
}
.resume-create {
    width: 540px;
    margin: 0 auto;
}
.reg_box {
    width: 424px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    margin: 40px auto 0;
    padding: 56px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.reg_box h2 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 28px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-bottom: 38px;
}
.reg_box h2 a {
    float: right;
    width: 40px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
}
.reg_box .el-form-item {
    margin-bottom: 36px;
}
.reg_box .el-form-item .el-input {
    line-height: 44px;
}
.reg_box .el-form-item .captchaCode {
    width: 206px;
}
.reg_box .el-form-item .captchaCode /deep/ input.el-input__inner {
    text-transform: uppercase;
    width: 206px;
}
.reg_box .el-form-item .el-form-item__content img {
    margin-left: 12px;
    vertical-align: top;
    width: 94px;
    height: 44px;
    background: rgba(239, 239, 239, 1);
    opacity: 1;
    cursor: pointer;
}
.reg_box .el-form-item /deep/ .el-input__suffix {
    left: 205px;
    width: 70px;
    padding: 0;
}

.reg_box .el-form-item .el-input__suffix .el-input__suffix-inner .el-button {
    width: 70px;
    height: 26px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    background: rgba(248, 248, 248, 1);
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    border-left: 2px solid rgba(232, 232, 232, 1);
}
.el-form-item /deep/ .el-input__inner {
    width: 312px;
    height: 44px;
    background: rgba(248, 248, 248, 1);
    opacity: 1;
    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.agreement {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
}
.agreement span {
    color: rgba(153, 153, 153, 1);
}
.agreement a {
    color: rgba(0, 147, 255, 1);
}
.reg_box .el-form-item .submit_btn {
    width: 312px;
    height: 44px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.info_box {
    width: 540px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    margin: 40px auto 0;
    padding: 61px 84px 25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.info_box h3 {
    width: 120px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-bottom: 40px;
}

.info_box .el-form-item {
    margin-bottom: 36px;
}
.info_box .el-form-item /deep/ .el-input__inner {
    width: 373px;
    height: 44px;
    background: rgba(248, 248, 248, 1);
    opacity: 1;
    border-radius: 4px;
}
.info_box .pre_btn {
    width: 128px;
    height: 44px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.info_box .finish_btn {
    width: 207px;
    height: 44px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    float: right;
}
.finish_box {
    margin-top: 30px;
    text-align: center;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 28px;
    opacity: 1;
}
.finish_box a {
    color: rgba(34, 34, 34, 1);
}
.el-dialog {
    padding: 0 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.el-dialog div {
    margin-top: 20px;
}
.el-dialog p {
    margin-top: 10px;
}
.el-dialog li {
    margin-left: 30px;
}
.el-dialog ol {
    margin-top: 10px;
}
.addBox /deep/ .el-dialog__footer {
    text-align: center;
}
.addBox /deep/ .el-button {
    width: 100px;
}
.addBox /deep/ .el-dialog__header {
    border-bottom: 1px solid #eee;
}

/*---------步骤条样式---end------*/
.text-color {
    color: white;
}

/*步骤条样式修改------------start----------*/
/*is-finish 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish {
    color: rgba(24, 147, 252, 1) !important;
    border-color: rgba(24, 147, 252, 1) !important;
}

/*is-process 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process {
    /* color: rgba(24,147,252,1); */
    /* border-color:rgba(24,147,252,1); */
}

/*is-wait 圆圈颜色*/
/* .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait {
    color: rgba(24,147,252,1);
    border-color:rgba(24,147,252,1);
  } */

/*is-finish title 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-finish {
    color: #666666;
    font-weight: 700;
    font-size: 14px;
}
/*is-process  title 颜色*/
.el-steps.el-steps--horizontal[data-v-9ebad220] .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}
/*description 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__description.is-finish {
    color: #999999;
}
/*is-finish 进程结束，is-process 状态颜色非加粗*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}

/* is-finish line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: rgba(232, 232, 232, 1);
}

/* is-process line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__line {
    /* border-color: inherit; */
    /* background-color:  rgba(232,232,232,1); */
    /* border: 1px solid; */
}

/* is-wait line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__line {
    border-color: inherit;
    /* background-color:rgba(232,232,232,1); */
    /* border: 1px solid; */
}

/* 已完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    font-size: 12px;
    border: 2px solid;
    background: rgba(24, 147, 252, 1);
}
.el-steps /deep/ .el-step__title {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}
/* 过度点 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid;
    font-size: 12px;
    background: #fff;
    color: #fff !important;
    border-color: rgba(24, 147, 252, 1) !important;
}

/* 未完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    font-size: 12px;
    border: 2px solid;
    background: #fff;
    color: #fff;
    border-color: rgba(24, 147, 252, 1) !important;
}
</style>